<template>
  <div class="horizontal-options" :class="getIndentClass(modelValue.alignment)">
    <!-- 字段名称 -->
    <div class="field-name-container">
      <span v-if="modelValue.prefixSymbol && modelValue.prefixSymbol !== 'none'" class="prefix-symbol">
        {{ getPrefixSymbol() }}
      </span>
      <el-input 
        v-model="modelValue.fieldName" 
        placeholder="字段名称"
        class="field-name-input"
        :class="{ 'bold-text': modelValue.isBold }"
        :style="{ width: getFieldNameWidth() }"
        @input="updateFieldName"
        @change="handleFieldNameChange"
      />
    </div>
    
    <!-- 选项列表 -->
    <div class="options-container">
      <div 
        v-for="(option, index) in modelValue.options" 
        :key="option.id"
        class="option-item"
      >
        <!-- 选项复选框样式 -->
        <div class="checkbox-wrapper">
          <div class="checkbox"></div>
        </div>
        
        <!-- 选项内容 -->
        <el-input 
          v-model="option.text" 
          placeholder="选项"
          class="option-input"
          :style="{ width: getOptionWidth(option.text) }"
          @input="updateOption(index, $event)"
        />
        
        <!-- 横线 -->
        <span v-if="option.showLine" class="option-line" :style="{ width: getLineWidth(option.lineLength) }"></span>
        
        <!-- 删除按钮 -->
        <el-button 
          v-if="modelValue.options.length > 1"
          type="danger" 
          size="small" 
          :icon="Delete"
          circle
          @click="removeOption(index)"
          class="delete-btn"
        />
      </div>
      
      <!-- 添加选项按钮 -->
      <el-button 
        type="primary" 
        size="small" 
        :icon="Plus"
        circle
        @click="addOption"
        class="add-btn"
      />
    </div>
  </div>
</template>

<script setup>
import { Delete, Plus } from '@element-plus/icons-vue'
import { v4 as uuidv4 } from 'uuid'

const props = defineProps({
  modelValue: {
    type: Object,
    required: true
  }
})

const emit = defineEmits(['update:modelValue'])

// 更新字段名称
const updateFieldName = (value) => {
  emit('update:modelValue', {
    ...props.modelValue,
    fieldName: value
  })
}

// 更新选项内容
const updateOption = (index, value) => {
  const newOptions = [...props.modelValue.options]
  newOptions[index].text = value
  
  emit('update:modelValue', {
    ...props.modelValue,
    options: newOptions
  })
}

// 添加选项
const addOption = () => {
  const newOptions = [...props.modelValue.options, {
    id: uuidv4(),
    text: '',
    showLine: false,
    lineLength: 10
  }]
  
  emit('update:modelValue', {
    ...props.modelValue,
    options: newOptions
  })
}

// 删除选项
const removeOption = (index) => {
  if (props.modelValue.options.length <= 1) return
  
  const newOptions = props.modelValue.options.filter((_, i) => i !== index)
  
  emit('update:modelValue', {
    ...props.modelValue,
    options: newOptions
  })
}

// 获取缩进类
const getIndentClass = (alignment) => {
  const indentMap = {
    'indent-0': 'indent-0',
    'indent-1': 'indent-1',
    'indent-2': 'indent-2',
    'indent-3': 'indent-3',
    'indent-4': 'indent-4',
    'indent-5': 'indent-5'
  }
  return indentMap[alignment] || 'indent-0'
}

// 获取横线宽度
const getLineWidth = (length) => {
  return `${(length || 10) * 8}px`
}

// 获取前缀符号
const getPrefixSymbol = () => {
  const symbolMap = {
    'dot_circle': '⏺',
    'star': '✧',
    'pointer': '☞',
    'arrow_curved': '⮚',
    'square': '⯀',
    // backward compatibility
    'triangle': '▶',
    'dot': '●',
    'wing_triangle': '▶',
    'wing_dot': '●'
  }
  return symbolMap[props.modelValue.prefixSymbol] || ''
}

// 计算文本宽度
const getTextWidth = (text, fontSize = '14px', fontFamily = 'Arial') => {
  const canvas = document.createElement('canvas')
  const context = canvas.getContext('2d')
  context.font = `${fontSize} ${fontFamily}`
  return context.measureText(text).width
}

// 获取字段名称宽度
const getFieldNameWidth = () => {
  const text = props.modelValue.fieldName || '字段名称'
  const width = getTextWidth(text, '14px', 'Arial')
  return `${Math.max(width + 20, 60)}px` // 最小60px，加20px内边距
}

// 获取选项宽度
const getOptionWidth = (text) => {
  const displayText = text || '选项'
  const width = getTextWidth(displayText, '14px', 'Arial')
  return `${Math.max(width + 20, 40)}px` // 最小40px，加20px内边距
}

const handleFieldNameChange = () => {
  // trim 去除空格
  props.modelValue.fieldName = props.modelValue.fieldName.trim();
};
</script>

<style lang="scss" scoped>
@import '@/assets/common-styles.scss';

.horizontal-options {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
}
</style> 